<template>
  <div class="nav">
    <span class="logo">Sunshine</span>
    <div class="navlist">
      <router-link to="/">首页</router-link>&emsp;
      <router-link to="/imgs">图片</router-link>&emsp;
      <router-link to="/blogs">博客</router-link>&emsp;
      <span v-if="user" style="color:#2196f3">Hi,{{user}}</span>&emsp;
      <button v-if="user" @click="loyout">注销</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyNav',
  data(){
    return {
      user:localStorage.getItem('token')
    }
  },
  methods:{
    loyout(){
      localStorage.setItem('token','');
      location.reload()
    }
  },
  watch:{
    '$route.path':function(){
      this.user = localStorage.getItem('token');
    }
  }
}
</script>

<style>
.nav{
  margin-top: -8px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  justify-items: start;
  background: #eee;
}
.nav .logo{
  margin-left:20px;
  color:orange;
  font-size:36px;

}
.nav .navlist{
  display:flex;
  place-items: center;
  margin-left:250px;
}
.nav .navlist a {
    font-size: 17px;
    text-decoration: none;
    color: rgb(70, 66, 66);
}
</style>